<!-- 品牌数据增改弹窗 -->

<style lang="scss" scoped>
.el-form {
  .el-form-item {
    margin: 15px 0;
  }

  .hjd-drawer__footer {
    margin-top: 50px;
  }
}
</style>

<template>
  <el-drawer
    ref="drawer"
    custom-class="hjd-drawer"
    :title="`${status === 'create' ? '新增' : '编辑'}词语`"
    :visible.sync="showDialog"
    :wrapper-closable="true"
    @close="$emit('update:visible', false)"
  >
    <div class="hjd-drawer__content">
      <el-form ref="dataForm" :model="form" label-width="100px" style=" margin-left:20px;margin-right:20px;">
        <el-form-item label="品牌名称" prop="source_name">
          <el-input v-model="form.source_name" />
        </el-form-item>

        <el-form-item label="中文名称" prop="brand_name">
          <el-input v-model="form.brand_name" />
        </el-form-item>

        <el-form-item label="英文名称" prop="brand_en_name">
          <el-input v-model="form.brand_en_name" />
        </el-form-item>

        <el-form-item label="拼音" prop="py">
          <el-input v-model="form.py" />
        </el-form-item>

        <el-form-item label="拼音简称" prop="py_short">
          <el-input v-model="form.py_short" />
        </el-form-item>

        <el-form-item label="品牌起源国家" prop="py_short">
          <el-select v-model="form.source_country_id" filterable>
            <el-option
              v-for="item in country"
              :key="item.country_id"
              :label="item.country_name"
              :value="item.country_id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="是否启用" prop="status">
          <el-switch v-model="form.status" />
        </el-form-item>

        <div class="hjd-drawer__footer">
          <el-button @click="showDialog = false">
            取消
          </el-button>
          <el-button type="primary" @click="submit">
            确定
          </el-button>
        </div>

      </el-form>
    </div>
  </el-drawer>
</template>

<script>

import _ from 'lodash'

import { handleAdd, handleEdit } from '@/api/base/brand'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: 'new'
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      showDialog: this.visible,

      beforeData: {},

      country: [],

      /**
       * 表单内容
       */
      form: {
        brand_id: '',
        source_name: '',
        brand_name: '',
        brand_en_name: '',
        py: '',
        py_short: '',
        brand_logo: '',
        status: 1,
        source_country_id: ''
      }
    }
  },

  async created() {
    this.beforeData = _.cloneDeep(this.data)
    if (this.status === 'update') {
      this.form = _.cloneDeep(this.data)
    }

    this.country = await this.$store.dispatch('app/getCountry')
  },

  methods: {
    submit() {
      // 数据没改动 直接关闭弹窗
      if (_.isEqual(this.form, this.beforeData)) {
        this.showDialog = false
        return
      }

      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 是否是创建
          const isCreate = this.status === 'create'

          // 请求数据
          const queryData = {
            source_name: this.form.source_name,
            brand_name: this.form.brand_name,
            brand_en_name: this.form.brand_en_name,
            py: this.form.py,
            py_short: this.form.py_short,
            brand_logo: this.form.brand_logo,
            status: this.form.status,
            source_country_id: this.form.source_country_id
          }

          // 修改时传 ID
          if (!isCreate) queryData['brand_id'] = this.form.brand_id

          // 请求接口
          const request = isCreate ? handleAdd : handleEdit
          request(queryData).then(() => {
            this.data.source_name = this.form.source_name
            this.data.brand_name = this.form.brand_name
            this.data.brand_en_name = this.form.brand_en_name
            this.data.py = this.form.py
            this.data.py_short = this.form.py_short
            this.data.brand_logo = this.form.brand_logo
            this.data.status = this.form.status
            this.data.source_country_id = this.form.source_country_id
            this.showDialog = false
            this.$notify.success(isCreate ? '创建成功' : '修改成功')
            // 刷新列表
            // this.$emit('reload')
          })
        }
      })
    }
  }
}
</script>
